import "./index.scss";
import { useRef, useEffect, useState } from "react";
import {
  HeatMapOutlined,
  ArrowDownOutlined,
  ArrowUpOutlined,
  AlertOutlined,
} from "@ant-design/icons";
import { Divider, Progress, Card, Col, Row, Statistic } from "antd";
import CountUp from "react-countup";

const formatter = (value: any) => <CountUp end={value} separator="," />;

const Main = () => {
  useEffect(() => {}, []);

  useEffect(() => {}, []);

  return (
    <div id="pad" className="home">
      <div className="top">
        <div className="top-item">
          <div style={{ display: "flex" }}>
            <div className="top-item-right">
              <span>监控视频</span>
              <span className="top-alter-box">
                <AlertOutlined />
                ：有14件待处理监控报警事件！！！
              </span>
            </div>
            <div className="top-item-left">
              <HeatMapOutlined style={{ color: "#fff", fontSize: "16px" }} />
            </div>
          </div>
        </div>
      </div>
      <fieldset
        style={{
          borderRadius: "8px",
          display: "flex",
          justifyContent: "space-around",
          zIndex: "99",
        }}
      >
        <legend style={{ marginLeft: "50px" }}>监控场景</legend>
        <div className="body-box">
          <div className="text-box">
            <span>+</span>
            <span className="text">1000CPS</span>
          </div>
        </div>
      </fieldset>
      <div className="bottom">
        <div className="body-left">
          <div className="l">
            <Row style={{ display: "flex", justifyContent: "space-evenly" }}>
              <div className="bottom-vdBox1"></div>

              <div className="bottom-vdBox2"></div>

              <div className="bottom-vdBox3"><span className="text-box">+</span></div>

              <div className="bottom-vdBox4"></div>
            </Row>
          </div>
        </div>
        <div className="body-right">
          <h3>核素类型</h3>
          {/* <Divider
            style={{ width: "2px", backgroundColor: "black" }}
            type="vertical"
          /> */}
          <h3>辐射强度(单位/CPS)</h3>
          <div className="l">
            <Row>
              <Col
                style={{
                  background: "#ffffff",
                  borderRadius: "8px",
                  marginRight: "10px",
                }}
                span={16}
              >
                <Statistic
                  title="类型1"
                  value={"------"}
                  precision={2}
                  valueStyle={{ color: "#cf1322" }}
                  prefix={<ArrowDownOutlined />}
                  suffix="%"
                />
              </Col>
              {/*  <Col
                style={{
                  background: "#ffffff",
                  borderRadius: "8px",
                  marginRight: "10px",
                }}
                span={22}
              >
                <Statistic
                  title="类型2"
                  value={"------"}
                  precision={2}
                  valueStyle={{ color: "#cf1322" }}
                  prefix={<ArrowDownOutlined />}
                  suffix="%"
                />
              </Col>       */}
            </Row>
          </div>
          <div className="r">
            <Row gutter={16}>
              <Col span={24}>
                <Statistic
                  valueStyle={{ color: "#eee" }}
                  value={1000}
                  precision={2}
                  formatter={formatter}
                />
              </Col>
            </Row>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Main;
